<!--
 * index.html
 * 熟悉前端开发相关技术 - 软件工程作业
 * 183401050225  黄远鹏
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绩点计算器</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="index.js" type="text/javascript"></script>
</head>

<body>
    <h1>绩点计算器</h1>
    <small>制作：黄远鹏(183401050225)</small>
    <hr />

    <table>
        <tr>
            <th>科目</th>
            <th>学分</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>程序设计基础</td>
            <td>3</td>
            <td>
                <form>
                    <!--  考试课成绩输入框。HTML5特性，不支持Firefox  -->
                    <input type="number" id="programmingScore" min="0" max="100" required>
                </form>
            </td>
        </tr>
        <tr>
            <td>高等数学(1)</td>
            <td>5.5</td>
            <td>
                <form>
                    <input type="number" id="advMathScore" min="0" max="100" required>
                </form>
            </td>
        </tr>
        <tr>
            <td>离散数学</td>
            <td>4</td>
            <td>
                <form>
                    <input type="number" id="discMathScore" min="0" max="100" required>
                </form>
            </td>
        </tr>
        <tr>
            <td>计算机科学导论</td>
            <td>1.5</td>
            <td>
                <form>
                    <!--  下拉列表，选择考查课成绩。option的value为成绩等级对应单科绩点  -->
                    <select id="introductionScore">
                        <option value="9">优秀</option>
                        <option value="7">良好</option>
                        <option value="5">中等</ovvion>
                        <option value="3">及格</option>
                        <option value="0">不及格</option>
                    </select>
                </form>
            </td>
        </tr>
        <tr>
            <td>体育</td>
            <td>1</td>
            <td>
                <form>
                    <select id="PEScore">
                        <option value="9">优秀</option>
                        <option value="7">良好</option>
                        <option value="5">中等</ovvion>
                        <option value="3">及格</option>
                        <option value="0">不及格</option>
                    </select>
                </form>
            </td>
        </tr>
    </table>
    <br />

    <!--  调用displayGPA()，以弹窗方式显示绩点计算结果  -->
    <button class="submit-button" onclick="displayGPA()">计算绩点</button>
</body>

</html>